<template>
  <div>
    <div style="line-height:0px">
      <div style="text-align: left;">
        <span style="margin-left: 30px">收费项目：</span>
        <el-input v-model="chargeConfig.chargeProject" style="width: 180px" placeholder="请输入收费项目"></el-input>

        <span style="margin-left: 30px">项目状态：</span>
        <el-select v-model="value" placeholder="项目状态">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button style="margin-left: 50px" type="primary" @click="found">查找</el-button>
        <el-button icon="el-icon-download" slot="trigger" style="margin-left: 30px" type="success"
          @click="exportExcel()">导出
        </el-button>

        <el-table ref="filterTable" :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="120">
          </el-table-column>
          <el-table-column prop="chargeProject" label="收费项目" width="180">
          </el-table-column>
          <el-table-column prop="unitPrice" label="项目单价" width="180">
          </el-table-column>
          <el-table-column prop="message" label="客户端通知方式" width="180">
          </el-table-column>
          <el-table-column prop="status" label="标签" width="100"
            :filters="[{ text: '启用', value: 'y' }, { text: '禁用', value: 'n' }]" :filter-method="filterTag"
            filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 'n' ? 'primary' : 'success'" disable-transitions
                v-if="scope.row.status == 'y'">启用
              </el-tag>
              <el-tag :type="scope.row.status === 'n' ? 'primary' : 'success'" disable-transitions v-else>禁用
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot="header">
            <strong>操作</strong>
            <el-button size="mini" type="success" style="margin-left:30px" @click="initAdd()">增加</el-button>
          </template>
            <template slot-scope="scope">
              <el-button size="mini" type="primary " @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleted(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <el-pagination background layout="prev, pager, next" :total="pageBean.totalNums" :current-page="pageBean.currPage"
        :page-size="pageBean.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <div>
      <el-dialog title="修改账单配置" :visible.sync="dialogFormVisible">
        <el-form :model="chargeConfigVo">
          <el-form-item label="收费项目" :label-width="formLabelWidth">
            <el-input v-model="chargeConfigVo.chargeProject" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目单价" :label-width="formLabelWidth">
            <el-input v-model="chargeConfigVo.unitPrice" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="通知方式" :label-width="formLabelWidth">
            <el-input v-model="chargeConfigVo.message" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目状态" :label-width="formLabelWidth">
            <el-select v-model="chargeConfigVo.status" placeholder="请选择项目状态">
              <el-option label="启用" value="y"></el-option>
              <el-option label="禁用" value="n"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" :plain="true" @click="updatedConfig()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="增加账单配置" :visible.sync="dialogAddFormVisible">
        <el-form :model="chargeConfigVo">
          <el-form-item label="收费项目" :label-width="formLabelWidth">
            <el-input v-model="chargeConfigVo.chargeProject" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目单价" :label-width="formLabelWidth">
            <el-input v-model="chargeConfigVo.unitPrice" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="通知方式" :label-width="formLabelWidth">
            <el-input v-model="chargeConfigVo.message" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目状态" :label-width="formLabelWidth">
            <el-select v-model="chargeConfigVo.status" placeholder="请选择项目状态">
              <el-option label="启用" value="y"></el-option>
              <el-option label="禁用" value="n"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" :plain="true" @click="add()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "ChargeConfig",
  data() {
    return {
      pageBean:
      {
        currPage: 1,// 当前页面
        totalPages: 0,// 总页数
        totalNums: 0,// 总数量
        pageSize: 0// 分页大小
      },
      chargeConfig: {
        chargeProject: "",
        status: "",
      },
      chargeConfigVo: {
        id: "",
        chargeProject: "",
        unitPrice: "",
        company: "",
        message: "",
        status: "",
      },
      page: 1,
      options: [{
        value: null,
        label: '全部'
      }, {
        value: 'y',
        label: '启用'
      }, {
        value: 'n',
        label: '禁用'
      }],
      value: '',
      tableData: [],
      dialogFormVisible: false,
      dialogAddFormVisible: false,
      formLabelWidth: '120px',
    }
  },
  methods: {
    filterTag(value, row) {
      return row.status === value;
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.getById(row.id);

    },
    handleDelete(index, row) {
      console.log(row.id);
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/chargeConfig/delete/" + row.id).then(r => {
        this.getChargeConfigs();
      })
    },
    found() {
      this.getChargeConfigs();
    },
    handleSizeChange(val) {
      this.pageBean.pageSize = val;
    },
    // 改变页数 （num）
    handleCurrentChange(val) {
      this.pageBean.currPage = val;
      console.log(val);
      console.log(this.pageBean.currPage);
      this.getChargeConfigs();
    },
    initAdd() {
      this.dialogAddFormVisible = true;
    },
    deleted(index, row) {
      if (row.status == "y") {
        this.$message({
          showClose: true,
          message: '本条数据是启用状态，禁止删除',
          type: 'error'
        });
      } else {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(index, row);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    exportExcel() {
      let chargeConfigVo = {
        chargeConfig: this.chargeConfig,
        page: this.pageBean.currPage
      }
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/chargeConfig/export", chargeConfigVo, {
        responseType: "blob",
      })
        .then((flow) => {
          if (!flow.data) return;
          const blob = new Blob([flow.data]);
          const blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.download = "chargConfig.xlsx"; // 自定义下载的文件名
          a.href = blobUrl;
          a.click();
        });
    },
    getChargeConfigs() {
      this.chargeConfig.status = this.value;
      console.log(this.chargeConfig.status)
      let chargeConfigVo = {
        chargeConfig: this.chargeConfig,
        page: this.pageBean.currPage,
      }
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/chargeConfig/list", chargeConfigVo).then(r => {
        let q = JSON.parse(JSON.stringify(r));
        // 解决[__ob__: Observer]问题
        console.log(q);
        if (q.data.code == 200) {
          console.log(q.data.code);
          this.pageBean = q.data.data;
          console.log(q.data.data.data);
          this.tableData = q.data.data.data;
        }
      })
    },
    updatedConfig() {
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/chargeConfig/update", this.chargeConfigVo).then(r => {
        if (r.data.code == 200) {
          this.dialogFormVisible = false;
          this.getChargeConfigs();
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
      })
    },
    add() {
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/chargeConfig/add", this.chargeConfigVo).then(r => {
        if (r.data.code == 200) {
          this.dialogAddFormVisible = false;
          this.getChargeConfigs();
          this.$message({
            message: '增加成功',
            type: 'success'
          });
        }
      })
    },
    getById(id) {
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/chargeConfig/getById/" + id).then(r => {
        if (r.data.code == 200) {
          console.log(r);
          this.chargeConfigVo = r.data.data;
        }
      })
    },
  },
  created() {
    this.getChargeConfigs();
  }
}
</script>
<style scoped="scoped">
</style>